<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>领券中心</title>
    <link rel="stylesheet" href="__CSS__/mui-3.6.1.min.css">
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/coupon_center.css">
</head>
<body>
<div class="topbar-between horizontal-view gradient-color">
    <div class="topbar-back">
        <div class="topbar-back-icon" onclick='javascript:location.href="/Wx/Index/index/r/my"'></div>
    </div>
    <div class="topbar-title">领券中心</div>
    <div class="topbar-right"></div>
</div>
<div id="slider" class="mui-slider mui-fullscreen">
    <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="mui-scroll">
            <!--店铺分类导航-->
            <volist name="levelOne" id="vo" key="key">
                <a class="mui-control-item <if condition='($key eq 1)'>mui-active</if>" href="#page{$key}">
                    <span>{$vo.catName}</span>
                    <input type="hidden" name="nowPage{$vo.catId}" id="indexPage{$key}" catId="{$vo.catId}" value="1"><!--分页用-->
                </a>
            </volist>
        </div>
    </div>

    <div class="mui-slider-group">
        <volist name="levelOne" id="vo" key="key">
        <div id="page{$key}" class="mui-slider-item mui-control-content">
            <div class="mui-scroll">
                <ul class="mui-table-view">
                    <volist name="vo.list" id="list">
                    <li class="mui-table-view-cell coupon-wrap">
                        <div class="horizontal-view coupon-left">
                            <img class="coupon-image" src="{$list.icon}">
                            <div class="vertical-view">
                                <div class="coupon-name">{$list.msg}</div>
                                <div class="coupon-name">{$list.shopName}</div>
                                <div class="coupon-time">{$list.begin_time}-{$list.end_time}</div>
                                <div class="coupon-time" style="display: none">领取张数：<em id="user_count{$list.id}">{$list.user_count}</em>/{$list.total_num}</div>
                            </div>
                        </div>

                        <div class="vertical-view coupon-right gradient-color">
                            <div class="coupon-money">{$list.breaks_menoy_msg}</div>
                            <div class="coupon-limit">{$list.name}</div>
                            <if condition="$list.is_effect eq 1">
                                <button type="button" class="coupon-btn-enable" onclick="getCoupon({$list.id},{$list.end_time2})">立即领取</button>
                                <else />
                                <button type="button" class="coupon-btn-disable">全部抢完</button>
                            </if>
                        </div>
                    </li>
                    </volist>
                </ul>
            </div>
        </div>
        </volist>
    </div>
</div>

<script src="__JS__/mui-3.6.1.min.js"></script>
<script src="__JS__/mui.pullToRefresh.js"></script>
<script src="__JS__/mui.pullToRefresh.material.js"></script>
<script src="__JS__/jquery2.1.1.min.js"></script>
<script>
    mui.init();
    (function ($) {

        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009;
        $('.mui-scroll-wrapper').scroll({
            bounce: false,
            indicators: true, //是否显示滚动条
            deceleration: deceleration
        });
        $.ready(function () {
            //循环初始化所有下拉刷新，上拉加载。
            $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {
                $(pullRefreshEl).pullToRefresh({
                    /*down: {
                        callback: function () {
                            var self = this;
                            setTimeout(function () {
                                var ul = self.element.querySelector('.mui-table-view');
//                                ul.insertBefore(createFragment(ul, index, 1, true), ul.firstChild);
//                                self.endPullDownToRefresh();
                                //删除子节点
                                var childs = ul.childNodes;
                                for(var i = childs.length - 1; i >= 0; i--) {
                                    ul.removeChild(childs[i]);
                                }

                                var index_new = index+1;//导航栏开始下表为0
                                document.getElementById('indexPage'+index_new).value=0;//第一页
                                appendData(self, index, 1);
                                self.endPullDownToRefresh();
                            }, 1000);
                        }
                    },*/
                    up: {
                        contentnomore:'没有更多数据了',
                        callback: function () {
                            var self = this;
                            setTimeout(function () {
//                                var ul = self.element.querySelector('.mui-table-view');
//                                ul.appendChild(createFragment(ul, index, 1));
//                                self.endPullUpToRefresh();
                                appendData(self, index, 2);
                            }, 1000);
                        }
                    }
                });
            });

            function appendData(self, index, count) {
                var ul = self.element.querySelector('.mui-table-view');
                var index_new = index+1;//导航栏开始下表为0
                var catId = document.getElementById('indexPage'+index_new).getAttribute("catId");//获取分类ID
                var indexPage = document.getElementById('indexPage'+index_new);//当前分类的当前页
                //console.log(catId);console.log(nowPage);
                var nowPage = parseInt(indexPage.value)+1//当前页
                var li;
                $.get('{:U("ajaxCouponList")}',{'catId':catId,'p':nowPage},function(res){
                    //console.log(res);
                    if(res.error==0){
                        indexPage.value=parseInt(indexPage.value)+1;//更新当前分类当前页+1
                        $.each(res.message,function(k,v){
                            var button = '';
                            console.log(v);
                            if(v.is_effect==1){
                                button='<button type="button" class="coupon-btn-enable" onclick="getCoupon('+v.id+','+v.end_time2+')">立即领取</button>';
                            }else{
                                button='<button type="button" class="coupon-btn-disable">全部抢完</button>';
                            }


                            var fragment = document.createDocumentFragment();
                            li = document.createElement('li');
                            li.className = 'mui-table-view-cell coupon-wrap';
                            li.innerHTML = '<div class="horizontal-view coupon-left">\
                            <img class="coupon-image" src="'+v.icon+'">\
                            <div class="vertical-view">\
                            <div class="coupon-name">'+v.msg+'</div>\
                            <div class="coupon-name">'+v.shopName+'</div>\
                            <div class="coupon-time">'+v.begin_time+'-'+v.end_time+'</div>\
                            <div class="coupon-time" style="display:none">领取张数：<em id="user_count'+v.id+'">'+v.user_count+'</em>/'+v.total_num+'</div>\
                        </div></div>\
                        <div class="vertical-view coupon-right gradient-color">\
                            <div class="coupon-money">'+v.breaks_menoy_msg+'</div>\
                            <div class="coupon-limit">'+v.name+'</div>'+button+'\
                            </div>';
                            //console.log(ul);
                            ul.appendChild(li)
                        });

                        self.endPullUpToRefresh();
                    } else{
                        self.endPullUpToRefresh(true);
                    }
                },'json');
            }
        });
    })(mui);

    function getCoupon(id,end_time) {
        mui.confirm(
            '您确定领取该优惠券吗？',
            '温馨提示',
            ['取消', '确定'],
            function (e) {
                if(e.index==1){
                    $.post('{:U("coupon/getyouhuiid")}',{'id':id,'end_time':end_time},function(data){
                        mui.toast(data.msg);
                        if(data.error==0){
                            //更新已领数量
                            var obj = document.getElementById('user_count'+id);
                            obj.innerHTML = parseInt(obj.innerHTML)+1;
                        }
                        setTimeout(function(){
                            if (data.url) {location.href=data.url;}
                        },1000);
                    },'json');

                }
            })
    }



</script>
</body>
</html>